<template>
    <!--采用elementplus 提供的方法替换-->
    <el-tree-select v-model="valueId"  :data="treeData" check-strictly :render-after-expand="false" >
    </el-tree-select>
</template>
<script setup>
import Validator from '@/utils/Validator'
const emit = defineEmits(['update:value']);
const props = defineProps({
    data: {
        type: Array,
        default: []
    },
    objMap: {
        tpye: Object,
        default: () => {
            return {
                value: 'id', // ID字段名
                label: 'label', // 显示名称
                children: 'children' // 子级字段名
            }
        }
    },
    /**当前双向数据绑定的值 */
    value: {
        type: [String,Number],
        default: ''
    },
})
// 将数据处理为 Tree
function handleTree(arr){
    if(Validator.isEmpty(arr)) return []
    arr.map(ele=>{
        ele.label = ele[props.objMap['label']]
        ele.value = ele[props.objMap['value']]
        ele.children = handleTree(ele[props.objMap['children']])
        return ele
    })
    return arr
}
const valueId = computed({
    get: () => props.value,
    set: (val) => {
        emit('update:value', val)
    }
});
const treeData = computed({
    get:() => {
        let t = props.data;
        return handleTree(t)
    }
})
</script>